@charset "utf-8";

/*reset*/
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
body,button,input,select,textarea{font:14px/150% tahoma,arial;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:courier new,courier,monospace;}
small{font-size:12px;}
ul,ol{list-style:none;}
a{text-decoration:none;}
p{ color: #fff; }
a:hover{text-decoration:underline;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-family: '苹方', 'Microsoft Yahei',SimSun,Helvetica;
}
html,body{font-size: 62.5% !important;}
div,span,img,a,p {
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
*{
  box-sizing: border-box;
}
/**内容填写**/
.wrapper {
  min-width: 100%;
  min-height: 100%;
  background: #fff url('./images/bg.jpg') center center no-repeat;
  background-size: 100% 100%;
  margin: 0 auto;
  border: 1px solid transparent;
}
 .wrapper .content {
   text-align: center;
   padding: 0 3%;
}
.wrapper .content  .header {
  text-align: center;
  margin: 0 auto;
  margin-top: 11%;
  margin-bottom: 6%;
}
.wrapper .content  .header img {
  max-width: 49%;/**522/1080**/
}
.wrapper .header .help {
  position: relative;
  display: inline-block;
  width: 100%;
  font-size: 15px;
  text-align: center;
  margin-right: -40px;
  margin-bottom: 2px;
}
.wrapper .header .help a{
  color: #fff;
  text-decoration: underline;
}
.wrapper .header .help .handicon {
  display: inline-block;
   width: 40px;
   height: 20px;
  background: transparent url(./images/hand.png) center center no-repeat;
  background-size: 100% 100%;
   vertical-align: middle;
}
 .content  .box {
  margin: 0 auto;
  position: relative;
  text-align: center;
}
.content  .box  img{
max-width: 100%;
}
/**padding-top是高度/宽度比   父类**/
 .content  .btnbox  {
  1background: rgba(0,0,0,.7);
position: absolute;
padding-top: 84%; /**844px / 1006px(背景图片宽度)**/
top:0;
left:0;
width: 100%;
text-align: center;
} 
 .content   .firstbtn {
margin-bottom: 3%;
}
.content .btn a {
    display: inline-block;
    width: 39%;
}
.content  .box .btn img {
  max-width: 100%;
}
/**底部留空**/
 .wrapper .content {
   padding-bottom: 40px;
 }
 .textcon {
  height: 40px;
  margin-top: -40px;
  1background: rgba(0,0,0,.7);
  text-align: center;
  line-height: 1.2rem;
  font-size: 1.2rem;
 }


/*  css[竖向定义样式]  */
@media screen and (orientation:portrait) {
  /* .wrapper {
    min-height: 568px;
    min-width: 320px;
  } */
}

/*   css[横向定义样式]  */
@media screen and (orientation:landscape) {
 /*  .wrapper {
   min-width: 500px;
   min-height: 750px;
 } */
}
@media screen  and (min-width:1160px){
   .content  .btnbox  {
        padding-top: 79%; 
}
}
@media screen  and (min-width:1240px){
   .content  .btnbox  {
        padding-top: 74%; 
}
}

/* 遮罩 */
.mask_wrapper {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7);
  text-align: right;
}
.mask_wrapper .open {
  width: 50%;
  max-width: 230px;
  position: relative;
  right: 29px;
  top: 20px
}